import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// Chip 小标签、小碎片
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chip',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashColor: Colors.transparent,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List names = ["slx", "jay", "mj"];

  String _clickName = "";

  List selectNames = [];

  String _choiceName = "slx";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chip'),
        elevation: 0.0,
      ),
      // 当子元素超过屏幕大小，自动换行
      body: Container(
        padding: EdgeInsets.all(8.0),
        child: Column(
          children: [
            Wrap(
              // 横向间距
              spacing: 16.0,
              // 纵向间距
              runSpacing: 4.0,
              children: [
                Chip(label: Text('Fauks')),
                Chip(
                  label: Text('SLX'),
                  backgroundColor: Colors.orange,
                ),
                Chip(
                  label: Text('孙凌霄'),
                  avatar: CircleAvatar(
                    child: Text('霄'),
                    backgroundColor: Colors.grey,
                  ),
                ),
                Chip(
                  label: Text('莫言小孙'),
                  avatar: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://cdn.pixabay.com/photo/2020/03/18/19/17/easter-4945288_1280.jpg'),
                  ),
                ),
                Chip(
                  label: Text('删除功能标签'),
                  onDeleted: () {},
                  deleteButtonTooltipMessage: '点击删除',
                  // 修改默认图标
                  deleteIcon: Icon(Icons.delete),
                  deleteIconColor: Colors.amber,
                )
              ],
            ),
            Divider(
              height: 32,
              color: Colors.redAccent,
              // 左右缩进
              indent: 12.0,
            ),
            // 带删除的标签
            Wrap(
              spacing: 8.0,
              children: names.map((name) {
                return Chip(
                  label: Text(name),
                  onDeleted: () {
                    setState(() {
                      names.remove(name);
                    });
                  },
                );
              }).toList(),
            ),
            Divider(
              height: 32,
              color: Colors.redAccent,
              // 左右缩进
              indent: 12.0,
            ),
            Container(
              width: double.infinity,
              child: Text('ActionClip:$_clickName'),
            ),
            // 带点击事件的标签
            Wrap(
              spacing: 8.0,
              children: names
                  .map((e) => ActionChip(
                      label: Text(e),
                      onPressed: () {
                        setState(() {
                          _clickName = e;
                        });
                      }))
                  .toList(),
            ),
            Divider(
              height: 32,
              color: Colors.redAccent,
              // 左右缩进
              indent: 12.0,
            ),
            Container(
              width: double.infinity,
              child: Text('FilterChip:${selectNames.toString()}'),
            ),
            // FilterChip:类似多选按钮
            Wrap(
              spacing: 8.0,
              children: names.map((name) {
                return FilterChip(
                    label: Text(name),
                    onSelected: (selected) {
                      if (selected) {
                        selectNames.add(name);
                      } else {
                        selectNames.remove(name);
                      }
                      setState(() {});
                    },
                    selected: selectNames.contains(name));
              }).toList(),
            ),
            Container(
              width: double.infinity,
              child: Text('ChoiceChip:$_choiceName'),
            ),
            // ChoiceChip:类似单选按钮
            Wrap(
              spacing: 8.0,
              children: names.map((name) {
                return ChoiceChip(
                    label: Text(name),
                    onSelected: (selected) {
                      setState(() {
                        _choiceName = name;
                      });
                    },
                    selected: _choiceName == name);
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}
